<template>
	<div class="send_details">
		<div class="send_details_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">待发货<i class="el-icon-close"></i></div>
		</div>
		<div class="send_details_title">
			<div class="send_details_title_left">待发货/<i>发货详情</i></div>
			<div class="send_details_title_right">
				<button class="send_details_title_right_btn" @click="handerBase">返回</button>
			</div>
		</div>
		<div class="send_details_content">
			<!-- 进度条 -->
			<div class="send_details_content_top">
				<div class="process">
					<div class="progress"><div class="progress_box"></div></div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">1</div></div>
						<div class="process_num_title">
							买家下单
							<div v-if="orderInfoData.create_time" class="process_num_title_text">{{orderInfoData.create_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.create_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">2</div></div>
						<div class="process_num_title">
							买家付款
							<div v-if="orderInfoData.pay_time" class="process_num_title_text">{{orderInfoData.pay_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.pay_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round round_active">3</div></div>
						<div class="process_num_title">
							商家发货
							<div v-if="orderInfoData.send_time" class="process_num_title_text">{{orderInfoData.send_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.send_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round round_active">4</div></div>
						<div class="process_num_title">
							订单完成
							<div v-if="orderInfoData.finish_time" class="process_num_title_text">{{orderInfoData.finish_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.finish_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
				</div>
			</div>
			<div class="send_details_content_center">
				<div class="send_details_content_center_left">
					<div class="top">
						<div class="send_details_content_center_left_box">
							<div class="left">订单编号：</div>
							<div class="right">{{orderInfoData.order_code}}</div>
						</div>
						<div class="send_details_content_center_left_box">
							<div class="left">付款方式：</div>
							<div class="right">{{orderInfoData.pay_type=='1'?'微信支付':orderInfoData.pay_type=='2'?'线下支付':''}}</div>
						</div>
						<div class="send_details_content_center_left_box">
							<div class="left">买家：</div>
							<div class="right right_active">{{orderInfoData.username}}</div>
						</div>
						<div class="send_details_content_center_left_box">
							<div class="left">配送方式：</div>
							<div class="right">{{orderInfoData.move_way=='1'?'快递':orderInfoData.move_way=='2'?'自提':''}}</div>
						</div>
						<div class="send_details_content_center_left_box">
							<div class="left">收货人：</div>
							<div class="right" id="content">{{orderInfoData.province}} {{orderInfoData.city}} {{orderInfoData.area}} {{orderInfoData.address}} {{orderInfoData.name}} {{orderInfoData.mobile}}</div>
							<font class="copyConsignee" data-clipboard-target="#content" @click="copyConsignee">复制</font>
						</div>
					</div>
					<div class="botton">
						<div class="botton_btn" @click="_reviseOrderInfo">修改订单收货信息</div>
					</div>
					<el-dialog
						title="修改收货信息"
						:visible.sync="dialogVisible"
						width="30%"
						@open="openFn"
						@closed="closedFn"
						:before-close="handleClose">
						<div class="dialogBox">
							<el-select v-model="value1" @change="select1" placeholder="请选择省份">
								<el-option
								v-for="item in options1"
								:key="item.cityid"
								:label="item.city_name"
								:value="item.cityid">
								</el-option>
							</el-select>
							<el-select v-model="value2" @change="select2" placeholder="请选择城市">
								<el-option
								v-for="item in options2"
								:key="item.cityid"
								:label="item.city_name"
								:value="item.cityid">
								</el-option>
							</el-select>
							<el-select v-model="value3" @change="select3" placeholder="请选择县区">
								<el-option
								v-for="item in options3"
								:key="item.cityid"
								:label="item.city_name"
								:value="item.cityid">
								</el-option>
							</el-select>
							<el-input v-model="address" placeholder="请输入详细地址"></el-input>
							<el-input v-model="name" placeholder="请输入联系人姓名"></el-input>
							<el-input v-model="mobile" type="number" placeholder="请输入联系人电话"></el-input>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button @click="closeDialog">取 消</el-button>
							<el-button type="primary" @click="confirmFn">确 定</el-button>
						</span>
					</el-dialog>
				</div>
				<div class="send_details_content_center_right">
					<div class="send_details_content_center_right_top">
						订单状态：<font>{{orderInfoData.order_status=='1'?'待付款':orderInfoData.order_status=='2'?'待发货':orderInfoData.order_status=='3'?'待收货':orderInfoData.order_status=='4'?'已完成':'已关闭'}}</font><i v-if="orderInfoData.order_status=='2'">（买家已经付款，请商家尽快发货）</i>
					</div>
					<div class="send_details_content_center_right_center">
						<button class="delivery" @click="confirmDelivery">确认发货</button>
						<!-- <i>添加备注</i> -->
						<button class="refund" @click="closeOrder">关闭并退款</button>
					</div>
					<div class="send_details_content_center_right_botton">
						友情提示：如果无法进行发货。请及时联系买家进行妥善处理;
					</div>
				</div>
			</div>
			<h3 class="table_text">商品信息</h3>
			<div class="send_details_content_bottom">
				<table>
					<tr>
						<th style="width: 20%;">商品标题</th>
						<th style="width: 19%;">规格、编号、条码</th>
						<th style="width: 11%;">单价</th>
						<th style="width: 11%;">数量</th>
						<th style="width: 13%;">原价</th>
						<th style="width: 13%;">折扣后</th>
						<th style="width: 13%;">状态</th>
					</tr>
					<tr v-for="(v,i) in orderInfoData.product_lst" :key="i">
						<td style="width: 20%;">
							<div class="tab_img">
								<img class="tab_img" style="border:0;" :src="v.main_imgurl" alt="">
							</div>
							<div class="tab_right">
								<div class="tab_right_title">{{v.product_title}}</div>
								<!-- <div class="tab_right_invoice">支持开票</div> -->
							</div>
						</td>
						<td class="td_active" style="width: 19%;">
							<div class="tab_box">
								<div class="tab_box_content">
									规格：
									<template v-if="v.attr_params && v.attr_params.length">
										 <p class="tab_spec" v-for="(item,index) in v.attr_params" :key="index">
											<i>{{item.value}}</i>
										</p>
									 </template>
									 <template v-else>无</template>
								</div>
								<div class="tab_box_content">编码：{{v.specss?v.specss:' 无'}}</div>
								<div class="tab_box_content">条码：{{v.specsss?v.specsss:' 无'}}</div>
							</div>
						</td>
						<td style="width: 11%;">￥{{v.price}}</td>
						<td style="width: 11%;">{{v.num}}个</td>
						<td style="width: 13%;">￥{{v.primary_price}}</td>
						<td style="width: 13%;">￥{{v.price}}</td>
						<td style="width: 13%;">{{v.order_status=='1'?'待付款':v.order_status=='2'?'待发货':v.order_status=='3'?'待收货':v.order_status=='4'?'已完成':'已关闭'}}</td>
					</tr>
				</table>
				<div class="price">
					<div class="price_box">
						<div class="price_box_left">商品小计：</div>
						<div class="price_box_right">￥{{orderInfoData.price}}</div>
					</div>
					<div class="price_box">
						<span class="price_box_left">运费：</span>
						<span class="price_box_right">￥{{orderInfoData.move_price}}</span>
					</div>
					<div class="price_box">
						<div class="box-left">
							<span class="price_box_left price_active">总价：</span>
							<span class="price_box_right price_active">￥{{orderInfoData.price}}</span>
						</div>
						<div class="box-center">
							<span class="price_box_left price_active">已付定金：</span>
							<span class="price_box_right price_active">￥{{orderInfoData.deposit_price}}</span>
						</div>
						<div class="box-right" v-if="orderInfoData.is_many_way==1">
							<span class="price_box_left price_active">待付尾款：</span>
							<span class="price_box_right price_active">￥{{orderInfoData.balance_price}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 确认发货 -->
		<div class="confirm" v-if="delivery">
			<div class="confirm_content">
				<div class="confirm_content_top">
					<div class="confirm_content_top_left">订单发货</div>
					<div class="confirm_content_top_right" @click="close"><i class="el-icon-close"></i></div>
				</div>
				<div class="confirm_content_center">
					<div class="confirm_content_center_box">
						<form>
							<div class="consignee">
								<div class="consignee_left">收货人</div>
								<div class="consignee_right">
									<div ref="consignees">联系人：{{orderInfoData.name}}/{{orderInfoData.mobile}}</div>
									<div ref="consigneess">地址：{{orderInfoData.province}}{{orderInfoData.city}}{{orderInfoData.area}}{{orderInfoData.address}}</div>
								</div>
							</div>
							<div class="courier">
								<div class="courier_left">快递公司</div>
								<div class="courier_right">
									<el-select v-model="form.express_id" @change="selectExpress" placeholder="请选择快递公司">
									    <el-option v-for="item in expressList" :key="item.id" :value="item.id" :label="item.express_name"></el-option>
									  </el-select>
								</div>
							</div>
							<div class="order">
								<div class="order_left">
									快递单号
								</div>
								<div class="order_right">
									<el-input v-model="form.courier_num" placeholder="请输入单号"></el-input>
								</div>
							</div>
							<div class="type">
								<div class="type_left">发货类型</div>
								<div class="type_right">
									<el-radio v-model="form.type" label="1">按订单发货</el-radio>
									<el-radio v-model="form.type" label="2">商品分包裹发货</el-radio><br />
									<i>选择商品发货类型</i>
								</div>
							</div>
							<!-- 商品列表 -->
							<div class="shopList">
								<div class="shopList_left">发货商品</div>
								<!-- 按订单 -->
								<template v-if="form.type==1">
									<el-tabs v-model="activeName" @tab-click="handleClick" style="width:65%;">
										<el-tab-pane label="未发货" name="first" style="max-height:200px;overflow:auto;">
											<div class="item" v-for="(item,index) in shopList" :key="index">
												<!-- <el-checkbox size="medium " v-model="item.checked"></el-checkbox> -->
												<img :src="item.main_imgurl" alt="">
												<div class="tit">{{item.product_title}}</div>
											</div>
										</el-tab-pane>
										<el-tab-pane label="已发货" name="second" style="max-height:200px;overflow:auto;">
											<div class="item" v-for="(item,index) in shopList" :key="index">
												<!-- <el-checkbox size="medium " v-model="item.checked"></el-checkbox> -->
												<div class="package">{{item.send_name}}</div>
												<div class="listBox">
													<div class="list" v-for="(item1,index1) in item.list" :key="index1">
														<img :src="item1.main_imgurl" alt="">
														<div class="tit">{{item1.product_title}}</div>
													</div>
												</div>
											</div>
										</el-tab-pane>
									</el-tabs>
								</template>
								<!-- 按包裹 -->
								<template v-else>
									<el-tabs v-model="activeName" @tab-click="handleClick" style="width:65%;">
										<el-tab-pane label="未发货" name="first" style="max-height:200px;overflow:auto;">
											<div class="item" v-for="(item,index) in shopList" :key="index">
												<el-checkbox size="medium " v-model="item.checked"></el-checkbox>
												<img :src="item.main_imgurl" alt="">
												<div class="tit">{{item.product_title}}</div>
											</div>
										</el-tab-pane>
										<el-tab-pane label="已发货" name="second" style="max-height:200px;overflow:auto;">
											<div class="item" v-for="(item,index) in shopList" :key="index">
												<!-- <el-checkbox size="medium " v-model="item.checked"></el-checkbox> -->
												<div class="package">{{item.send_name}}</div>
												<div class="listBox">
													<div class="list" v-for="(item1,index1) in item.list" :key="index1">
														<img :src="item1.main_imgurl" alt="">
														<div class="tit">{{item1.product_title}}</div>
													</div>
												</div>
											</div>
										</el-tab-pane>
									</el-tabs>
								</template>
							</div>
						</form>
					</div>
				</div>
				<div class="confirm_content_bottom">
					<div class="confirm_content_bottom_btn" @click="confirmDeliverys">确认发货</div>
					<div class="confirm_content_bottom_btn" @click="close">取消</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import ClipboardJS from 'clipboard';
	
	export default {
		data() {
			return {
				delivery:false,					// 确认收货
				form:{
					consignee:'',
					express_id:'',
					courier_num:'',
					type:'1',
				},
				total:0.00,							// 实付款
				freight:0.00,						// 运费
				subtotal:0.00,						// 小计
				changePrice:0.00,					// 卖家改价
				orderInfoData:[], 
				expressList:[], //快递列表
				dialogVisible:false,
				options1:[],//省份
				options2:[],//城市
				options3:[],//县区
				value1:'',
				value2:'',
				value3:'',
				address:'',//详细地址
				name:'',//姓名
				mobile:'',//手机号
				shopList:[],
				activeName:'first',
				order_status:2
			}
		},
		mounted() {
			this._getOrderInfo();
			this._getExpress();
			this.getProvince();
			// console.log(this.$route.query,'query');
			if(this.$route.query.status){
				this.getShopList()
			}
			this.delivery = this.$route.query.status?this.$route.query.status:false
		},
		methods: {
			handerBase() {
				this.$router.go(-1);
			},
			// 实现复制功能
			copyConsignee() {
				// 括号中的内容：对应复制按钮的class
				let clipboard = new ClipboardJS('.copyConsignee');
				clipboard.on('success', function(e) {
					console.log("复制成功");
					e.clearSelection();
				});
				clipboard.on('error', function(e) {
					console.log("复制失败，请重试");
					console.log(e)
				});
			},
			// 点击显示确认发货信息
			confirmDelivery() {
				this.delivery = true;
				this.getShopList()
			},
			// 选择快递公司
			selectExpress(e){
				this.form.express_id = e
				console.log(e,'快递公司');
			},
			// 点击关闭并退款
			closeOrder(){
				this.$confirm('确定要关闭此订单吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
				}).then(()=>{
					let params = {
						order_id:this.$route.query.order_id
					}
					this.$http.post('/api/root/packOrder/cancel',params).then(res=>{
						console.log(res,'关闭结果');
						if(res.code==1){
							this.$message.success('关闭成功')
							this.$router.back(1)
						}else{
							this.$message.warning(res.msg)
						}
					})
				}).catch(()=>{})
			},
			confirmDeliverys() {
				if(!this.form.express_id){
					this.$message.warning('请选择快递公司')
					return
				}
				if(!this.form.courier_num){
					this.$message.warning('请输入快递单号')
					return
				}
				let idArr = []
				if(this.form.type==1){
					this.shopList.map(item=>{
						idArr.push(item.id)
					})
				}else{
					this.shopList.map(item=>{
						if(item.checked){
							idArr.push(item.id)
						}
					})
				}
				if(!idArr.length){
					this.$message.warning('请选择发货商品')
					return
				}
				let params = {
					order_id:this.$route.query.order_id,
					send_type:this.form.type,
					courier_num:this.form.courier_num,
					express_id:this.form.express_id,
					id_lst:idArr.join(',')
				}
				console.log(params,'确认发货数据');
				this.$http.post('/api/root/packOrder/send',params).then(res=>{
					console.log(res,'发货结果');
					if(res.code==1){
						this.$message.success('发货成功')
						this.form.type='1'
						this.form.courier_num=''
						this.express_id = ''
						this.delivery = false;
					}else{
						this.$message.warning(res.msg)
					}
				})
			},
			// 点击了取消，X 号
			close() {
				this.form.type='1'
				this.form.courier_num=''
				this.express_id = ''
				this.delivery = false;
			},
			//获取传过来的order_id，获取商品详情
			_getOrderInfo(){
				console.log(this.$route);
				let order_id = this.$route.query.order_id;
				this.$http.post('/api/root/PackOrder/detail',{order_id}).then(res=>{
					console.log(res);
					if(res.code==1){
						this.orderInfoData = res.data?res.data:[];
					}else{
						this.$message.warning(res.msg)
					}
				})
			},

			// 获取已发货或未发货商品
			getShopList(){
				let params = {
					order_id:this.$route.query.order_id,
					order_status:this.order_status, //2待发货，3已发货
				}
				this.$http.post('/api/root/packOrder/waitSend',params).then(res=>{
					console.log(res,'待发货或已发货商品');
					if(res.code==1){
						res.data.list.map(item=>item.checked=false)
						this.shopList = res.data.list?res.data.list:[]
						console.log(this.shopList,'待发货商品');
					}
				})
			},

			// 发货商品切换
			handleClick(tab){
				console.log(tab,'商品切换');
				if(tab.label=='未发货'){
					this.order_status = 2
					this.getShopList()
				}else{
					this.order_status = 3
					this.getShopList()
				}
			},
			
	// 省份选择
	select1(){
		this.getCityList()
	},
	// 城市选择
	select2(){
		if(!this.value1){
			this.$message.warning('请先选择省份')
			return
		}
		this.getAreaList()
	},
	// 县区选择
	select3(){
		if(!this.value2){
			this.$message.warning('请先选择城市')
			return
		}
	},
	
	
	// 获取省份
	getProvince(){
		this.$http.post('/api/root/Region/getProvinceList').then(res=>{
			console.log(res,'省份');
			if(res.code==1){
				this.options1 = res.data?res.data:[]
			}
		})
	},
	// 获取城市
	getCityList(){
		this.$http.post('/api/root/Region/getCityList',{province_id:this.value1}).then(res=>{
			console.log(res,'城市列表');
			if(res.code==1){
				this.options2 = res.data?res.data:[]
			}
		})
	},
	// 获取县区
	getAreaList(){
		this.$http.post('/api/root/Region/getDistrictList',{city_id:this.value2}).then(res=>{
			console.log(res,'县区列表');
			if(res.code==1){
				this.options3 = res.data?res.data:[]
			}
		})
	},
    //修改订单信息
    _reviseOrderInfo() {
		this.dialogVisible = true
    },
	// 对话框取消按钮
	closeDialog(){
		this.dialogVisible = false
	},
	// 对话框确定按钮
	confirmFn(){
		if(this.value1==''){
			this.$message.warning('请选择省份')
			return
		}
		if(this.value2==''){
			this.$message.warning('请选择城市')
			return
		}
		if(this.value3==''){
			this.$message.warning('请选择县区')
			return
		}
		if(this.name==''){
			this.$message.warning('请输入联系人')
			return
		}
		if(this.mobile==''){
			this.$message.warning('请联系电话')
			return
		}
		if(this.address==''){
			this.$message.warning('请输入详细地址')
			return
		}
		let province = ''
		this.options1.map(item=>{
			if(item.cityid==this.value1){
				province = item.city_name
			}
		})
		let city = ''
		this.options2.map(item=>{
			if(item.cityid==this.value2){
				city = item.city_name
			}
		})
		let area = ''
		this.options3.map(item=>{
			if(item.cityid==this.value3){
				area = item.city_name
			}
		})
		let params = {
			order_id:this.$route.query.order_id,
			name:this.name,
			mobile:this.mobile,
			province,
			city,
			area,
			address:this.address
		}
		this.$http.post('/api/root/packOrder/editAdress',params).then(res=>{
			console.log(res,'修改信息结果');
			if(res.code==1){
				this.$message.success('修改成功')
				this._getOrderInfo()
				this.options2=[]
				this.options3=[]
				this.name=''
				this.mobile=''
				this.address=''
				this.value1=''
				this.value2=''
				this.value3=''
				this.dialogVisible = false
			}
		})
	},

	// 关闭对话框后
	closedFn(){	
		this.options2=[]
		this.options3=[]
		this.name=''
		this.mobile=''
		this.address=''
		this.value1=''
		this.value2=''
		this.value3=''
	},

	openFn(){
		this.value1=''
		this.value2=''
		this.value3=''
		this.options2=[]
		this.options3=[]
		this.name = this.orderInfoData.name
		this.address = this.orderInfoData.address
		this.mobile = this.orderInfoData.mobile
	},
	// 关闭对话框
	handleClose(){
		this.dialogVisible = false
	},
			//获取物流方式
			_getExpress(){
				this.$http.post('/api/root/freight/expressList').then(res=>{
					console.log(res);
					if(res.code==1){
						this.expressList = res.data.data?res.data.data:[];
					}
				})
			}
		},
		// computed: {
		// 	// 商品小计
		// 	subtotalPrice() {
		// 		this.completedList.filter(v => {
		// 			this.subtotal += v.price;
		// 			console.log(v);
		// 		});
		// 		return `${this.subtotal}.00`;
		// 	},
		// 	// 运费
		// 	freightPrice() {
		// 		this.completedList.filter(v => {
		// 			this.freight += v.freight;
		// 		})
		// 		return `${this.freight}.00`
		// 	},
		// 	// 卖家改价
		// 	changePrices() {
		// 		for(let i=0;i<this.completedList.length;i++) {
		// 			this.changePrice += this.completedList[i].prices - this.completedList[i].pricess;
		// 		}
		// 		return `${this.changePrice}.00`;
		// 	},
			
		// 	// 实付款
		// 	totalPrice() {
		// 		this.completedList.filter(v => {
		// 			this.total += v.pricess;
		// 		});
		// 		return `${this.total}.00`;
		// 	}
		// },
	}
</script>

<style lang="less" scoped="scoped">
	@import 'details.less';
</style>
